@import "ng-tools/ng-tools-styles";

$defaultAnimationSpeed: 1s;
$animationSpeed: (xfast: .2s, fast: .5s, normal: 1s, slow: 1.5s, xslow: 2s);
.dd-animated {
  animation-duration: $defaultAnimationSpeed;
  animation-fill-mode: both;
}

.dd-animated.infinite {
  animation-iteration-count: infinite;
}

@each $speed, $time in $animationSpeed {
  .#{$speed} {
    animation-duration: $time;
  }
}

@keyframes fade-in-down {
  0% {
    opacity: 0;
    transform: translate3d(0, -100%, pxToRem(-10000px));
  }

  99% {
    opacity: .99;
    transform: translate3d(0, -1%, pxToRem(-10000px));
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, pxToRem(99px));
  }
}

@keyframes menu-slide-in-left {
  from {
    width: pxToRem(50px);
  }
  to {
    width: pxToRem(200px);
  }
}

.fade-in-down {
  animation-name: fade-in-down;
}

.menu-slide-in-left {
  animation-name: menu-slide-in-left;
  animation-timing-function: linear;
}
